import Vue from 'vue'
import Vuex from 'vuex'

// 1.安装插件
 Vue.use(Vuex)

//2.创建对象
const moduleA = {
  state:{
    name : '张三'
  },
  mutations:{
    updatename(state,upload){
      state.name = upload
    }
  },
  actions:{
    aUpdateName(context){
      //只commit 自己的mutations
      setTimeout(() => {
        context.commit('updatename','wangwu')
      },1000)

    }
  },
  getters:{
    fullName(state){
      return state.name + '1111'
    },
    fullName2(state,getters){
      return getters.fullName + '2222'
    },
    fullName3(state,getters,rootState){
      return getters.fullName2 + rootState.counter
    },
  },
}


const store = new Vuex.Store({
  //状态  存的是属性
  state:{
    counter: 1000,
    students:[
      {id: 110 , name : '小刚', age :18},
      {id: 111 , name : '小赵', age :20},
      {id: 112 , name : '小李', age :22},
      {id: 113 , name : '小王', age :24},
    ],
    info :{
      name : 'kobe',
      age :40 ,
      height: 1.88
    }
  },
  //用于改变state  方便vue.devtools监控
  //mutations中的方法必须的同步的
  // 如果是异步的话 vue.devtools不能跟踪到本次的变化
  mutations:{
    increment(state){
      state.counter++
    },
    decrement(state){
      state.counter--
    },
    incrementCount(state,counter){
      console.log(counter.count)
      console.log(counter.age)
      // state.counter += counter
    },
    addStudent(state,stu){
      state.students.push(stu)
    },
    updateInfo(state,stu){
      state.info.name = 'coderwhy'

      //不能在mutations中异步
      // setTimeout(()=>{
      //   state.info.name = 'coderwhy'
      // },1000)

      // state.info['address'] = '洛杉矶'
      // Vue.set(state.info,'address','洛杉矶',)

      // delete  state.info.name;
      // Vue.delete(state.info.name)

    }
  },
  // actions是替代mutations做异步操作的
  actions:{
    //context上下文
    // aUpdateInfo(context,palLoad){
    //   //模拟异步操作
    //   setTimeout(()=>{
    //     context.commit('updateInfo')
    //     //回调
    //     // palLoad()
    //     console.log(palLoad.message);
    //     palLoad.success()
    //     console.log('aUpdateInfo');
    //   },1000)
    // }
    aUpdateInfo(context,palLoad){
      //模拟异步操作
      // setTimeout(()=>{
      //   context.commit('updateInfo')
      //   //回调
      //   // palLoad()
      //   console.log(palLoad);
      // },1000)

      return new Promise((resolve, reject) => {
        setTimeout(()=>{
            context.commit('updateInfo')
            console.log(palLoad);

            resolve('1111')
          },1000)
      })

    }
  },
  //get外界提供一个得到的方法（对内部属性做一些操作）
  getters:{
    powerCounter(state){
      return state.counter * state.counter
    },
    more20(state){
        return state.students.filter(s => {
          return s.age > 20
        })
    },
    more20lenth(state,getters){
      return getters.more20.length
    },
    moreAgestu(state){
      return function (age){
        return state.students.filter(s => {
          return s.age > age
        })
      }
    }
  },
  //当state很多的时候  可以在modules中可以分模块
  modules:{
    //a模块
    a:moduleA
  }
})

// 3.导出
export default store
